﻿<template>
    <card>
      
      <div class="search-con search-con-top">
      <Button @click="del" class="search-btn" type="primary"><Icon type="search"/>&nbsp;删除</Button>
      <Input  placeholder="输入orderByType搜索" class="search-input" v-model="searchModel.orderByType"/>
      <Input  placeholder="输入subjectKey搜索" class="search-input" v-model="searchModel.subjectKey"/>
      <Button @click="searchData" class="search-btn" type="primary"><Icon type="search"/>&nbsp;&nbsp;搜索</Button>
      </div>

      <Table :columns="columns1" :data="data1"></Table>
      <div style="margin: 10px;overflow: hidden">
          <div style="float: right;">
              <Page :total="total" :current="searchModel.pageNo" @on-change="changePage"></Page>
          </div>
      </div>
      
      <!--编辑页面-->
      <Modal v-model="modalStatus" title="编辑"  @on-cancel="cancel" @on-ok="ok" class-name="vertical-center-modal" draggable scrollable>
        
        <Form :model="formItem" :label-width="80">
            <Tabs value="name1">
                <TabPane label="标签一" name="name1">
          <input type="hidden" v-model="formItem.productID"></input>
          <input type="hidden" v-model="formItem.sellerUserid"></input>
          <input type="hidden" v-model="formItem.sellerid"></input>
          <FormItem label="商品货号">
            <Input v-model="formItem.productCargonumber"></Input>
          </FormItem>
          <FormItem label="商品标题">
            <Input v-model="formItem.subject"></Input>
          </FormItem>
          <FormItem label="分类">
              <Select v-model="formItem.categoryid">
                  <Option value="1">衣服</Option>
                  <Option value="2">裤子</Option>
                  <Option value="3">鞋子</Option>
                  <Option value="4">帽子</Option>
                  <Option value="5">手套</Option>
              </Select>
              <input type="hidden" v-model="formItem.categoryname"></input>
          </FormItem>
          <FormItem label="自定义分类">
              <Select v-model="formItem.customCategoryid">
                  <Option value="1">衣服</Option>
                  <Option value="2">裤子</Option>
                  <Option value="3">鞋子</Option>
                  <Option value="4">帽子</Option>
                  <Option value="5">手套</Option>
              </Select>
              <input type="hidden" v-model="formItem.customCategoryname"></input>
          </FormItem>
          <FormItem label="品牌">
              <Select v-model="formItem.brandid">
                  <Option value="1">小米</Option>
                  <Option value="2">华为</Option>
                  <Option value="3">苹果</Option>
                  <Option value="4">三星</Option>
                  <Option value="5">魅族</Option>
              </Select>
          </FormItem>        
          <FormItem label="业务类型">
              <Select v-model="formItem.bitType">
                  <Option value="1">商品</Option>
                  <Option value="2">加工</Option>
                  <Option value="3">代理</Option>
                  <Option value="4">合作</Option>
                  <Option value="5">商务服务</Option>
              </Select>
          </FormItem>
          <FormItem label="每批数量" prop="batchnumber">
            <Input type="text" v-model="formItem.batchnumber" number></Input>
          </FormItem>
          <FormItem label="详情描述" prop="description">
            <Input v-model="formItem.description" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="Enter something..."></Input>
          </FormItem>
          </TabPane>
        <TabPane label="标签二" name="name2">
          <FormItem label="运费模板">
              <Select v-model="formItem.freighttemplateid">
                  <Option value="1">商品</Option>
                  <Option value="2">加工</Option>
                  <Option value="3">代理</Option>
                  <Option value="4">合作</Option>
                  <Option value="5">商务服务</Option>
              </Select>
          </FormItem>
          <FormItem label="备货期" prop="handlingTime">
            <Input type="text" v-model="formItem.handlingTime" number></Input>
          </FormItem>
          <FormItem label="主图视频播放地址">
            <Input v-model="formItem.handlingTime"></Input>
          </FormItem>
          <FormItem label="最小起订量" prop="minOrderQuantity">
            <Input type="text" v-model="formItem.minOrderQuantity" number></Input>
          </FormItem>
          <FormItem label="支持混批">
              <Select v-model="formItem.mixWholeSale">
                  <Option value="1">是</Option>
                  <Option value="0">否</Option>
              </Select>
          </FormItem>
          <FormItem label="尺寸，单位是厘米" prop="packageSize">
            <Input type="text" v-model="formItem.packageSize" number></Input>
          </FormItem>
          <FormItem label="有效期天" prop="periodOfValidity">
            <Input type="text" v-model="formItem.periodOfValidity" number></Input>
          </FormItem>
          </TabPane>
        <TabPane label="标签三" name="name3">
          <FormItem label="是否图片私密信息">
              <Select v-model="formItem.pictureAuth">
                  <Option value="1">是</Option>
                  <Option value="0">否</Option>
              </Select>
          </FormItem>
          <FormItem label="报价时单价" prop="price">
            <Input type="text" v-model="formItem.price" number></Input>
          </FormItem>
          <FormItem label="是否价格私密信息">
              <Select v-model="formItem.priceAuth">
                  <Option value="1">是</Option>
                  <Option value="0">否</Option>
              </Select>
          </FormItem>
          <FormItem label="普通报价">
            <Input v-model="formItem.quoteType"></Input>
          </FormItem>
          <FormItem label="建议零售价" prop="price">
            <Input type="text" v-model="formItem.retailPrice" number></Input>
          </FormItem>
          <FormItem label="销售方式">
              <Select v-model="formItem.saleType">
                  <Option value="normal">件</Option>
                  <Option value="batch">批</Option>
              </Select>
          </FormItem>
          <FormItem label="售卖单位">
            <Input v-model="formItem.sellUnit"></Input>
          </FormItem>
          </TabPane>
        <TabPane label="标签四" name="name4">
          <FormItem label="发货地址">
              <Select v-model="formItem.sendgoodsaddressid">
                  <Option value="normal">件</Option>
                  <Option value="batch">批</Option>
              </Select>
              <Input v-model="formItem.sendgoodsaddresstext"></Input>
          </FormItem>
          <FormItem label="是否支持网上交易">
              <Select v-model="formItem.supportOnlineTrade">
                  <Option value="1">支持</Option>
                  <Option value="0">不支持</Option>
              </Select>
          </FormItem>
          <FormItem label="税率相关信息">
            <Input v-model="formItem.unitWeight"></Input>
          </FormItem>
          <FormItem label="体积，单位是立方厘米" >
            <Input type="text" v-model="formItem.volume"></Input>
          </FormItem>
          <FormItem label="图片" prop="image">
            <photoList v-if="show" v-model="formItem.image.images"></photoList>
          </FormItem>
          </TabPane>
        <TabPane label="标签五" name="name5">
          <FormItem label="规格">
            <Col span="12">
                    <Button type="dashed" long @click="addItem" icon="md-add">添加规格</Button>
                </Col>
          </FormItem>
          <FormItem
                v-for="(item, index) in formItem.skuInfos"
                :key="index">
            <Row>
                <Col span="18">
                    <Input type="text" v-model="item.units"  placeholder="Enter something..."></Input>
                </Col>
                <Col span="4" offset="1">
                    <Button @click="delItem(index)">Delete</Button>
                </Col>
            </Row>
        </FormItem>
          
          </TabPane>
           </Tabs>
        </Form>
	    </Modal>
    
    </card>       

</template>

<script>
import { getProductlist } from "@/api/data";
import { delProduct } from "@/api/data";
import { getProduct } from "@/api/data";
import { editProduct } from "@/api/data";
import { addProduct } from "@/api/data";
import photoList from './photoList.vue'
export default {
    components: {
    photoList
  },
  data() {
    return {
      show:true,
      columns1: [
        {
          type: "selection",
          width: 60,
          align: "center"
        },
        {
          title: "编号",
          key: "productID"
        },
        {
          title: "名称",
          key: "categoryName"
        },
        {
          title: "操作",
          key: "action",
          width: 150,
          align: "center",
          render: (h, params) => {
            return h("div", [
              h(
                "Button",
                {
                  props: {
                    type: "primary",
                    size: "small"
                  },
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      this.edit(params.index, params.row.productID);
                    }
                  }
                },
                "编辑"
              ),
              h(
                "Button",
                {
                  props: {
                    type: "error",
                    size: "small"
                  },
                  on: {
                    click: () => {
                      this.delData(params.index, params.row.productID);
                    }
                  }
                },
                "删除"
              )
            ]);
          }
        }
      ],
      data1: [],
      searchModel: {
        categoryId: 0,
        pageNo: 1,
        orderByType: "",
        subjectKey: ""
      },
      total: 0,
      //编辑页面数据
      modalStatus: false,
      formItem: {
        attributes: [
          {
            attributeid: 0,
            attributename: "string",
            enname: "string",
            iscustom: 0,
            value: "string",
            valueid: 0
          }
        ],
        batchnumber: 0,
        bitType: 0,
        brandid: 0,
        categoryid: 0,
        categoryname: "string",
        customCategoryid: 0,
        customCategoryname: "string",
        description: "string",
        freighttemplateid: 0,
        handlingTime: 0,
        image: {
          images: ["http://img.lgh81.com//productPic/c58662dd16354f6b94ea85a5c60569d0.jpg","http://img.lgh81.com//Upload/images/9980a9eb7f0743549ade10f282960e24.jpg"],
          isWatermark: 0,
          isWatermarkFrame: 0,
          watermarkPosition: "string"
        },
        mainVedio: "string",
        minOrderQuantity: 0,
        mixWholeSale: 0,
        packageSize: 0,
        periodOfValidity: 0,
        pictureAuth: 0,
        price: 0,
        priceAuth: 0,
        productCargonumber: "string",
        productId: 0,
        quoteType: "string",
        retailPrice: 0,
        saleType: "string",
        sellUnit: "string",
        sellerUserid: 0,
        sellerid: 0,
        sendgoodsaddressid: 0,
        sendgoodsaddresstext: "string",
        skuInfos: [
          {
            amountOnSale: 0,
            attributes: [
              {
                attributeDisplayName: "string",
                attributeValue: "string",
                attributeid: 0,
                attributename: "string",
                attvalueid: 0,
                customValuename: "string",
                enname: "string",
                iscustom: 0,
                skuImageurl: "string"
              }
            ],
            cargoNumber: "string",
            price: 0,
            priceRange: [
              {
                price: 0,
                startQuantity: 0
              }
            ],
            retailPrice: 0,
            skuCode: "string",
            skuId: 0,
            units: "string"
          },{
            amountOnSale: 0,
            attributes: [
              {
                attributeDisplayName: "string",
                attributeValue: "string",
                attributeid: 0,
                attributename: "string",
                attvalueid: 0,
                customValuename: "string",
                enname: "string",
                iscustom: 0,
                skuImageurl: "string"
              }
            ],
            cargoNumber: "string",
            price: 0,
            priceRange: [
              {
                price: 0,
                startQuantity: 0
              }
            ],
            retailPrice: 0,
            skuCode: "string",
            skuId: 0,
            units: "string"
          }
        ],
        subject: "string",
        supportOnlineTrade: 0,
        tax: "string",
        unitWeight: "string",
        volume: 0
      }
    };
  },
  methods: {
    getData() {
      //获取数据
      getProductlist(this.searchModel).then(res => {
        this.data1 = res.data.data.list;
        this.total = res.data.data.totalRecords;
      });
    },
    searchData() {
      //搜索数据
      this.searchModel.pageNo = 1;
      this.getData();
    },
    delData(index, id) {
      //删除数据
      this.$Modal.confirm({
        title: "确认",
        content: "确认删除?",
        onOk: () => {
          delProduct(id).then(res => {
            if (res.data.code == 1) {
              this.data1.splice(index, 1);
            } else {
              this.$Message.info(res.data.data);
            }
          });
        }
      });
    },
    changePage(value) {
      //翻页
      this.searchModel.pageNo = value;
      this.getData();
    },
    //编辑页面方法
    edit(index, id) {
      getProduct(id).then(res => {
        debugger;
        this.show = false;
        if (res.data.code == 1) {
          this.formItem = res.data.data;
          this.modalStatus = true;
        } else {
          this.$Message.info(res.data.data);
        }
        this.$nextTick().then(()=>{
          this.show = true;
        })
      });
    },
    cancel() {
      this.modalStatus = false;
    },
    add() {
      this.modalStatus = true;
    },
    ok() {
      if (this.formItem.productID != 0) {
        //编辑
        editProduct(formItem).then(res => {
          if (res.data.code == 1) {
            this.formItem = res.data.data;
            this.modalStatus = false;
          } else {
            this.modalStatus = false;
            this.$Message.info(res.data.data);
          }
        });
      } else {
        //添加
        addProduct(formItem).then(res => {
          if (res.data.code == 1) {
            this.formItem = res.data.data;
            this.modalStatus = false;
          } else {
            this.modalStatus = false;
            this.$Message.info(res.data.data);
          }
        });
      }
    },
    addItem(){
      this.formItem.skuInfos.push({
            amountOnSale: 0,
            attributes: [
              {
                attributeDisplayName: "string",
                attributeValue: "string",
                attributeid: 0,
                attributename: "string",
                attvalueid: 0,
                customValuename: "string",
                enname: "string",
                iscustom: 0,
                skuImageurl: "string"
              }
            ],
            cargoNumber: "string",
            price: 0,
            priceRange: [
              {
                price: 0,
                startQuantity: 0
              }
            ],
            retailPrice: 0,
            skuCode: "string",
            skuId: 0,
            units: "string"
          });
    },
    delItem(index){
      this.formItem.skuInfos.splice(index,1);
    }
  },
  mounted() {
    this.getData(); //初始化数据
  }
};
</script>



